<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单管理 - 智慧小区管理系统</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <style>
        body { padding: 24px; background: #f5f7fa; }
        .layui-table th, .layui-table td { text-align: center; }
        .order-detail-list { margin-top: 16px; }
        .order-detail-list th, .order-detail-list td { text-align: left; }
        
        /* 订单详情弹窗样式 */
        .order-detail-container {
            padding: 20px;
        }
        .order-detail-item {
            margin-bottom: 12px;
        }
        .order-detail-label {
            color: #666;
            font-weight: 500;
        }
        .order-detail-value {
            color: #333;
        }
        .order-detail-value.status {
            color: #5FB878;
            font-weight: bold;
        }
        .order-detail-value.amount {
            color: #e74c3c;
            font-weight: bold;
            font-size: 16px;
        }
        
        /* 状态徽章样式 - 完全参考order.html */
        .status-badge { 
            padding: 6px 12px; 
            border-radius: 20px; 
            font-size: 12px; 
            font-weight: bold;
            border: 2px solid rgba(255,255,255,0.3);
        }
        .status-1 { background: rgba(255, 193, 7, 0.9); color: #856404; }
        .status-2 { background: rgba(23, 162, 184, 0.9); color: white; }
        .status-3 { background: rgba(220, 53, 69, 0.9); color: white; }
        .status-4 { background: rgba(40, 167, 69, 0.9); color: white; }

        .layui-table-cell{
            height:auto;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header" style="font-size:1.2em;font-weight:bold;">订单管理</div>
    <div class="layui-card-body">
        <table class="layui-table" id="orderTable" lay-filter="orderTableFilter"></table>
    </div>
</div>

<!-- 操作栏模板 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">
        <i class="layui-icon layui-icon-search"></i> 详情
    </a>
    {{# if(d.status === 2) { }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="complete">
        <i class="layui-icon layui-icon-ok"></i> 完成订单
    </a>
    {{# } }}
</script>

<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
layui.use(['table', 'layer', 'jquery'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    // 全局设置ajax请求头
    $.ajaxSetup({
        beforeSend: function(xhr) {
            const data = JSON.parse(localStorage.getItem('user'));
            //输出token
            console.log(data.token);
            if (data.token) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
            }
        }
    });

    // 渲染订单表格
    table.render({
        elem: '#orderTable',
        url: '/order/listAll',
        method: 'get',
        page: true,
        limit: 10,
        limits: [10, 20, 50],
        cols: [[
            { field: 'orderId', title: '订单号', width: 200 },
            { field: 'userName', title: '用户', width: 120 },
            { field: 'totalAmount', title: '总金额', width: 120, sort: true, templet: d => '¥' + d.totalAmount },
            { field: 'status', title: '状态', width: 120, templet: d => `<span class="status-badge ${getStatusClass(d.status)}">${getStatusText(d.status)}</span>` },
            { field: 'orderTime', title: '下单时间', width: 220, sort: true, templet: d => formatDate(d.orderTime) },
            { field: 'deliveryAddress', title: '收货地址', width: 250 },
            { field: 'phoneNumber', title: '联系电话', width: 120 },
            { title: '操作', toolbar: '#tableBar', width: 180 }
        ]]
    });

    // 监听详情按钮
    table.on('tool(orderTableFilter)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail') {
            showOrderDetail(data);
        } else if(obj.event === 'complete') {
            completeOrder(data);
        }
    });

    // 订单详情弹窗
    function showOrderDetail(order) {
        layer.open({
            type: 1,
            title: '订单详情 - 订单号：' + order.orderId,
            area: ['600px', '500px'],
            shadeClose: true, // 点击弹窗外区域关闭弹窗
            content: `
                <div class="order-detail-container">
                    <div class="layui-card" style="margin-bottom: 16px;">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-form"></i> 订单信息
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="order-detail-item">
                                        <span class="order-detail-label">订单号：</span>
                                        <span class="order-detail-value">${order.orderId}</span>
                                    </div>
                                    <div class="order-detail-item">
                                        <span class="order-detail-label">用户：</span>
                                        <span class="order-detail-value">${order.userName || '-'}</span>
                                    </div>
                                    <div class="order-detail-item">
                                        <span class="order-detail-label">下单时间：</span>
                                        <span class="order-detail-value">${formatDate(order.orderTime)}</span>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="order-detail-item">
                                        <span class="order-detail-label">状态：</span>
                                        <span class="order-detail-value status">
                                            <span class="status-badge ${getStatusClass(order.status)}">${getStatusText(order.status)}</span>
                                        </span>
                                    </div>
                                    <div class="order-detail-item">
                                        <span class="order-detail-label">总金额：</span>
                                        <span class="order-detail-value amount">¥${order.totalAmount}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    

                    <div class="layui-card" style="margin-bottom: 16px;">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-location"></i> 收货信息
                        </div>
                        <div class="layui-card-body">
                            <div class="order-detail-item">
                                <span class="order-detail-label">收货地址：</span>
                                <span class="order-detail-value">${order.deliveryAddress}</span>
                            </div>
                            <div class="order-detail-item">
                                <span class="order-detail-label">联系电话：</span>
                                <span class="order-detail-value">${order.phoneNumber}</span>
                            </div>
                            <div class="order-detail-item">
                                <span class="order-detail-label">备注：</span>
                                <span class="order-detail-value">${order.remark || '无'}</span>
                            </div>
                        </div>
                    </div>
                    

                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-cart"></i> 商品清单
                        </div>
                        <div class="layui-card-body">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                    <tr>
                                        <th>商品名称</th>
                                        <th>数量</th>
                                        <th>单价</th>
                                        <th>小计</th>
                                    </tr>
                                </thead>
                                <tbody id="orderItems_${order.orderId}">
                                    <tr><td colspan="4" style="text-align:center;color:#bbb;">加载中...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `,
            success: function() {
                // 加载订单商品明细
                $.get('/order/items', { orderId: order.orderId }, function(res) {
                    if (res.code === 0 && res.data && res.data.length > 0) {
                        var html = '';
                        res.data.forEach(function(item) {
                            html += `
                                <tr>
                                    <td>${item.productName || ('商品ID:' + item.productId)}</td>
                                    <td>${item.quantity}</td>
                                    <td>¥${item.price}</td>
                                    <td>¥${(item.price * item.quantity).toFixed(2)}</td>
                                </tr>
                            `;
                        });
                        $('#orderItems_' + order.orderId).html(html);
                    } else {
                        $('#orderItems_' + order.orderId).html('<tr><td colspan="4" style="text-align:center;color:#bbb;">暂无商品明细</td></tr>');
                    }
                });
            }
        });
    }

    // 状态文本 - 完全参考order.html
    function getStatusText(status) {
        switch(status) {
            case 1: return '待支付';
            case 2: return '已支付';
            case 3: return '已取消';
            case 4: return '已送达';
            default: return '未知状态';
        }
    }
    
    // 获取订单状态样式类
    function getStatusClass(status) {
        return 'status-' + status;
    }

    // 完成订单
    function completeOrder(order) {
        layer.confirm('确认将此订单标记为已完成吗？', {
            icon: 3,
            title: '确认完成订单',
            btn: ['确认完成', '取消']
        }, function(index) {
            layer.close(index);
            $.ajax({
                url: '/order/complete',
                method: 'POST',
                data: { orderId: order.orderId },
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg('订单已完成', {icon: 1});
                        // 刷新表格
                        table.reload('orderTable');
                    } else {
                        layer.msg('操作失败：' + res.message, {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，请稍后重试', {icon: 2});
                }
            });
        });
    }

    // 时间格式化
    function formatDate(time) {
        if (!time) return '';
        var d = new Date(time);
        return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) + ' ' +
               pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
    }
    function pad(n) { return n < 10 ? '0' + n : n; }
});
</script>
</body>
</html> 